<?php
/**
 * Classe per la generazione automatica di alcune componenti HTML quali:
 *
 * - BUTTON: classico pulsante 'html' con grafica creata dalla libreria jquery
 * - LIBRERIE RICHIESTE:	jquery-1.4.1.min.js
 *							jquery.ui.widget.js
 *							jquery.ui.button.js
 *
 * - LINK: classico link 'html' personalizzabile tramite varie opzioni una tra le quali lo trasforma in un BUTTON
 * - LIBRERIE RICHIESTE:	jquery-1.4.1.min.js
 *							jquery.ui.widget.js
 *							jquery.ui.button.js
 *
 * - TITLE BAR: creazione barre di titolo
 * - LIBRERIE RICHIESTE:	Nessuna
 *
 * - SLIDER BAR: barra per selezionare un range di valori in maniera grafica
 * - LIBRERIE RICHIESTE:	jquery-1.4.1.min.js
 *							jquery.ui.widget.js
 *							jquery.ui.mouse.js
 *							jquery.ui.slider.js
 *
 * - SORTABLE LIST: lista ordinabile in ajax
 * - LIBRERIE RICHIESTE:	jquery-1.4.1.min.js
 *							jquery.ui.core.js
 *							jquery.ui.widget.js
 *							jquery.ui.mouse.js
 *							jquery.ui.sortable.js
 *
 * - TOOLTIP: clasico tooltip da applicare agli elementi della pagina
 * - LIBRERIE RICHIESTE:	jquery-1.4.1.min.js
 *							jquery.tools.min.js
 * 
 * @author Damiano Ciarla
 */
class HtmlComponents
{
	//--> Valori per le ICONE dei pulsanti
	
	const TRIANGLE_N			= "ui-icon-triangle-1-n";
	const TRIANGLE_NE			= "ui-icon-triangle-1-ne";
	const TRIANGLE_E			= "ui-icon-triangle-1-e";
	const TRIANGLE_SE			= "ui-icon-triangle-1-se";
	const TRIANGLE_S			= "ui-icon-triangle-1-s";
	const TRIANGLE_SW			= "ui-icon-triangle-1-sw";
	const TRIANGLE_W			= "ui-icon-triangle-1-w";
	const TRIANGLE_NW			= "ui-icon-triangle-1-nw";

	const ARROW_N				= "ui-icon-arrow-1-n";
	const ARROW_NE				= "ui-icon-arrow-1-ne";
	const ARROW_E				= "ui-icon-arrow-1-e";
	const ARROW_SE				= "ui-icon-arrow-1-se";
	const ARROW_S				= "ui-icon-arrow-1-s";
	const ARROW_SW				= "ui-icon-arrow-1-sw";
	const ARROW_W				= "ui-icon-arrow-1-w";
	const ARROW_NW				= "ui-icon-arrow-1-nw";

	const ARROWSTOP_N			= "ui-icon-arrowstop-1-n";
	const ARROWSTOP_E			= "ui-icon-arrowstop-1-e";
	const ARROWSTOP_S			= "ui-icon-arrowstop-1-s";
	const ARROWSTOP_W			= "ui-icon-arrowstop-1-w";

	const ARROWTHICK_N			= "ui-icon-arrowthick-1-n";
	const ARROWTHICK_NE			= "ui-icon-arrowthick-1-ne";
	const ARROWTHICK_E			= "ui-icon-arrowthick-1-e";
	const ARROWTHICK_SE			= "ui-icon-arrowthick-1-se";
	const ARROWTHICK_S			= "ui-icon-arrowthick-1-s";
	const ARROWTHICK_SW			= "ui-icon-arrowthick-1-sw";
	const ARROWTHICK_W			= "ui-icon-arrowthick-1-w";
	const ARROWTHICK_NW			= "ui-icon-arrowthick-1-nw";

	const ARROWTHICKSTOP_N		= "ui-icon-arrowthickstop-1-n";
	const ARROWTHICKSTOP_E		= "ui-icon-arrowthickstop-1-e";
	const ARROWTHICKSTOP_S		= "ui-icon-arrowthickstop-1-s";
	const ARROWTHICKSTOP_W		= "ui-icon-arrowthickstop-1-w";

	const ARROWRETURNTHICK_N	= "ui-icon-arrowreturnthick-1-n";
	const ARROWRETURNTHICK_E	= "ui-icon-arrowreturnthick-1-e";
	const ARROWRETURNTHICK_S	= "ui-icon-arrowreturnthick-1-s";
	const ARROWRETURNTHICK_W	= "ui-icon-arrowreturnthick-1-w";

	const ARROWRETURN_N			= "ui-icon-arrowreturn-1-n";
	const ARROWRETURN_E			= "ui-icon-arrowreturn-1-e";
	const ARROWRETURN_S			= "ui-icon-arrowreturn-1-s";
	const ARROWRETURN_W			= "ui-icon-arrowreturn-1-w";

	const ARROWREFRESH_N		= "ui-icon-arrowrefresh-1-n";
	const ARROWREFRESH_E		= "ui-icon-arrowrefresh-1-e";
	const ARROWREFRESH_S		= "ui-icon-arrowrefresh-1-s";
	const ARROWREFRESH_W		= "ui-icon-arrowrefresh-1-w";

	const EXT_LINK				= "ui-icon-extlink";
	const NEW_WIN				= "ui-icon-newwin";
	const REFRESH				= "ui-icon-refresh";
	const FOLDER_COLLAPSED		= "ui-icon-folder-collapsed";
	const FOLDER_OPEN			= "ui-icon-folder-open";
	const DOCUMENT				= "ui-icon-document";
	const DOCUMENT_B			= "ui-icon-document-b";
	const MAIL_CLOSED			= "ui-icon-mail-closed";
	const MAIL_OPEN				= "ui-icon-mail-open";
	const TRASH					= "ui-icon-trash";
	const LOCKED				= "ui-icon-locked";
	const UNLOCKED				= "ui-icon-unlocked";
	const CART					= "ui-icon-cart";
	const PENCIL				= "ui-icon-pencil";
	const ZOOM_IN				= "ui-icon-zoomin";
	const ZOOM_OUT				= "ui-icon-zoomout";
	const SEARCH				= "ui-icon-search";

	const CANCEL				= "ui-icon-cancel";
	const PLUS					= "ui-icon-plus";
	const PLUSTHICK				= "ui-icon-plusthick";
	const MINUS					= "ui-icon-minus";
	const MINUSTHICK			= "ui-icon-minusthick";
	const CLOSE					= "ui-icon-close";
	const CLOSETHICK			= "ui-icon-closethick";
	
	const KEY					= "ui-icon-key";
	const ALERT					= "ui-icon-alert";
	const INFO					= "ui-icon-info";
	const NOTICE				= "ui-icon-notice";
	const HELP					= "ui-icon-help";
	const CHECK					= "ui-icon-check";

	const CIRCLE_PLUS			= "ui-icon-circle-plus";
	const CIRCLE_MINUS			= "ui-icon-circle-minus";
	const CIRCLE_CLOSE			= "ui-icon-circle-close";
	const CIRCLE_TRIANGLE_E		= "ui-icon-circle-triangle-e";
	const CIRCLE_TRIANGLE_S		= "ui-icon-circle-triangle-s";
	const CIRCLE_TRIANGLE_W		= "ui-icon-circle-triangle-w";
	const CIRCLE_TRIANGLE_N		= "ui-icon-circle-triangle-n";
	const CIRCLE_ARROW_E		= "ui-icon-circle-arrow-e";
	const CIRCLE_ARROW_S		= "ui-icon-circle-arrow-s";
	const CIRCLE_ARROW_W		= "ui-icon-circle-arrow-w";
	const CIRCLE_ARROW_N		= "ui-icon-circle-arrow-n";
	const CIRCLE_ZOOM_IN		= "ui-icon-circle-zoomin";
	const CIRCLE_ZOOM_OUT		= "ui-icon-circle-zoomout";
	const CIRCLE_CHECK			= "ui-icon-circle-check";

	//--> Tipologie di button

	const BUT_TYPE_BUTTON	= "button";
	const BUT_TYPE_SUBMIT	= "submit";
	const BUT_TYPE_RESET	= "reset";

	/**
	 * Questo metodo serve per creare un pulsante di tipo jQuery. Ad ogni pulsante viene associato uno script che lo trasforma in un button
	 * che ha relativa allo stile CSS impostato di default.
	 *
	 * @param string $type			Indica il tipo di button che viene creato. Utilizzare le costanti con suffisso 'BUT_TYPE_'
	 * @param string $label			OPZIONALE: Etichetta da associare al pulsante
	 * @param string $icon			OPZIONALE: Icona da associare. Scegliere tra una delle costanti presenti nella classe
	 * @param string $tagID			OPZIONALE: Tag ID da associare al pulsante !IMPORTANTE: il valore deve essere univoco nella pagina!
	 * @param string $onClickFun	OPZIONALE: Funzione javascript da eseguire al click del pulsante
	 */

	public static function button($type, $label = null, $icon = null, $tagID = null, $onClickFun = null)
	{
		if($type != HtmlComponents::BUT_TYPE_BUTTON and $type != HtmlComponents::BUT_TYPE_SUBMIT and $type != HtmlComponents::BUT_TYPE_RESET)
		{
			$type = HtmlComponents::BUT_TYPE_BUTTON;
		}

		$button  = "<button class='custom-button-html-components' ";
		$button .= "type=\"" . $type . "\" ";

		if(!is_null($tagID) and is_string($tagID))
		{
			$button .= "id=\"" . $tagID . "\" ";
		}

		if(!is_null($onClickFun) and $type == BUT_TYPE_BUTTON)
		{
			$button .= "onclick=\"" . $onClickFun . "\" ";
		}

		$button .= ">";
		$button .= $label;
		$button .= "</button>";

		$script  = "<script type=\"text/javascript\">";
		$script .= "$(\"button.custom-button-html-components\").button(";
		
		if(!is_null($icon))
		{
			$script .= "{ icons: { primary: 'ui-icon " . $icon . "' } }";
		}

		$script .= ");";
		$script .= "</script>";

		echo $button . $script;
	}

	/**
	 * Metodo per la creazione dei Link.
	 * Questi possono essere personalizzati con tutti gli attributi possibili grazie a quelli esplicitati di default come
	 * $class per lo stile CSS o tramite l'opzione $otherAttr dove e' possibile definire un'array associativo con ATTRIBUTO - VALORE
	 * per dichiarare quelli non presenti nella lista di attibuti del metodo
	 *
	 * @param string $id				Identificativo univoco del link
	 * @param string $href				Url dove indirizzare la pagina
	 * @param string $label				Etichetta da associare al link
	 * @param string $class				Classe CSS da associare al link
	 * @param string $onclick			Funzione javascript da eseguire al click sul link
	 * @param boolean $underline		Specifica se si vuole la sottolineatura nel link
	 * @param boolean $egualStyleButton Indica se il link dovra' avere l'aspetto di un pulsante
	 * @param array $otherAttr			Array associativo ATTRIBUTO - VALORE che specifica altri attributi da inserire nel link
	 */

	public static function link($href, $label, $id = null, $class = null, $onclick = null, $underline = true, $egualStyleButton = false, $otherAttr = null)
	{
		if(!is_null($onclick))
			$href = "#";
		
		if(is_bool($egualStyleButton) and $egualStyleButton)
			$tempClass = "custom-link-html-components ";
		
		$link  = "<a href=\"" . $href . "\" ";
		
		if(is_string($id) && $id != "")
			$link .= "id=\"".$id."\" ";
		
		if(is_string($class) and $class != "")
			$class = $tempClass . $class;
		else
			$class = $tempClass;
		
		$link .= "class=\"" . $class . "\" ";
		
		if(!is_null($onclick))
			$link .= "onClick=\"" . $onclick . "\" ";
		
		if(is_bool($underline) and !$underline)
			$link .= "style=\"text-decoration:none\" ";
		
		if(is_array($otherAttr))
		{
			foreach ($otherAttr as $attr => $val)
				$link .= $attr . "=\"" . $val . "\" ";
		}
			
		$link .= ">";
		$link .= $label;
		$link .= "</a>";

		$script  = "<script type=\"text/javascript\">";
		$script .= "$(\"a.custom-link-html-components\").button();";
		$script .= "</script>";

		echo $link;

		if(is_bool($egualStyleButton) and $egualStyleButton)
		{
			echo $script;
		}
	}

	/**
	 * Metodo per creare barre di titolo
	 *
	 * @param string $text	Testo da visualizzare nella barra
	 * @param string $icon	Icona da visualizzare accanto al testo
	 */

	public static function titleBar($text, $icon = null)
	{
		$titleBar  = "<p class=\"ui-state-default ui-corner-all ui-helper-clearfix\" style=\"padding:6px 4px;\">";

		if(!is_null($icon))
		{
			$titleBar .= "<span style=\"float:left; margin:-2px 5px 0 0;\" class=\"ui-icon " . $icon . "\"></span>";
		}
		
		$titleBar .= $text;
		$titleBar .= "</p>";

		echo $titleBar;
	}

	/**
	 * Metodo per creare una barra adatta a selezionare un range di valori in maniera grafica
	 *
	 * @param string $label			Etichetta del campo di testo
	 * @param string $nameInputText	Nome del campo di testo sul quale poi verra' creato il nome del componente
	 * @param int $min				Valore minimo dello slider
	 * @param int $max				Valore massimo dello slider
	 * @param int $start			Valore di partenza
	 *
	 * @return null
	 */

	public static function sliderBar($label, $nameInputText, $min = null, $max = null, $start = null)
	{
		if(empty($nameInputText))
		{
			echo	"<font color='red'><strong>" .
					TD_("COMPONENTE HTML (Slide bar):", "components") .
					"</strong> " .
					TD_("È obbligatorio specificare il tag NAME per il seguente componente. Si ricorda che questo valore deve essere univoco all'interno della pagina", "components") .
					"</font>";
			
			return;
		}

		if(is_null($min)) $min		= SLIDER_BAR_MIN;
		if(is_null($max)) $max		= SLIDER_BAR_MAX;
		if(is_null($start)) $start	= SLIDER_BAR_START;

		$nameSliderBar	= "sliderRange" . ucfirst($nameInputText);
		$idInputText	= "idInputSlider" . ucfirst($nameInputText);

		$script  = "<script type=\"text/javascript\">";

		$script .= "$(\"#" . $nameSliderBar . "\").slider({";
		$script .= "range: \"min\",";
		$script .= "value: " . $start . ",";
		$script .= "min: " . $min . ",";
		$script .= "max: " . $max . ",";
		$script .= "slide: function(event, ui) {";
		$script .= "$(\"#" . $idInputText . "\").val(ui.value);";
		$script .= "}";
		$script .= "});";
		$script .= "$(\"#" . $idInputText . "\").val($(\"#" . $nameSliderBar . "\").slider(\"value\"));";

		$script .= "</script>";

		$html .= "<p>";
		$html .= "<label for=\"" . $idInputText . "\">" . $label . "</label>";
		$html .= "<input type=\"text\" id=\"" . $idInputText . "\" name=\"" . $nameInputText . "\" style=\"border:0; color:#f6931f; font-weight:bold;\" />";
		$html .= "</p>";
		$html .= "<div id=\"" . $nameSliderBar . "\"></div>";

		echo $html . $script;
	}

	/**
	 * Metodo che crea una lista ordinabile a partire da un array di elementi
	 *
	 * @param string $name				Nome della lista
	 * @param array $arrayList			Array di valori da stampare
	 * @param string $pageSendResult	Pagina di destinazione per il submit della lista
	 * @param string $callbackFunction	Funzione javascript da richiamare dopo aver effettuato lo spostamento degli elementi
	 *
	 * @return null
	 */

	public static function sortableList($name, $arrayList, $pageSendResult = null, $callbackFunction = null)
	{
		if(trim($name) == "")
		{
			echo	"<font color='red'><strong>" . 
					TD_("COMPONENTE SORTABLE LIST:", "components") .
					"</strong> " .
					TD_("È obbligatorio un nome che si univoco all'interno della pagina", "components") .
					"</font>";
			
			return;
		}

		if(!is_array($arrayList) or count($arrayList) < 2)
		{
			echo	"<font color='red'><strong>" .
					TD_("COMPONENTE SORTABLE LIST:", "components") .
					"</strong> " .
					TD_("È obbligatorio passare un array valorizzato con almeno due RECORD inseriti", "components") .
					"</font>";

			return;
		}

		$style  = "<style type=\"text/css\">";
		$style .= "#sortable-list-" . strtolower($name) . " { list-style-type: none; margin: 0; padding: 0; width: 100%; }";
		$style .= "#sortable-list-" . strtolower($name) . " li { margin: 0 5px 5px 0px; padding: 3px 2px; font-size: 1em; height: 1.5em; }";
		$style .= "#sortable-list-" . strtolower($name) . " li { height: 1.5em; }";
		$style .= "#sortable-list-" . strtolower($name) . " .ui-state-highlight { height: 1.5em; }";
		$style .= "</style>";

		$list = "";

		if(!is_null($pageSendResult))
		{
			$list .= "<div id=\"loading-sortable-list-" . strtolower($name) . "\" style='display:none' class=\"loading\">" . TD_("Attendere che i dati siano inviati correttamente...", "components") . "</div>";
		}

		$list .= "<ul id=\"sortable-list-" . strtolower($name) . "\">";
		for ($i = 1 ; $i <= count($arrayList) ; $i++)
		{
			$list .= "<li id=\"sortable-list-" . strtolower($name) . "-" . $i . "\" class=\"ui-state-default\">" . $arrayList[$i - 1] . "</li>";
		}
		$list .= "</ul>";

		$script  = "<script type=\"text/javascript\">";
		$script .= "$(\"#sortable-list-" . strtolower($name) . "\").sortable({";
		$script .= "placeholder: 'ui-state-highlight'";

		if(!is_null($pageSendResult) or !is_null($callbackFunction))
		{
			$script .= ", update: function() {";

			if(!is_null($pageSendResult))
			{
				$script .= "$(\"#loading-sortable-list-" . strtolower($name) . "\").show();";
				$script .= "$.post(\"" . $pageSendResult . "\", ";
				$script .= "$(\"#sortable-list-" . strtolower($name) . "\").sortable('serialize'), ";
				$script .= "function(){ $(\"#loading-sortable-list-" . strtolower($name) . "\").hide(); });";
			}

			if(!is_null($callbackFunction))
			{
				$script .= $callbackFunction . "()";
			}

			$script .= "}";
		}

		$script .= "});";
		$script .= "$(\"#sortable-list-" . strtolower($name) . "\").disableSelection();";
		$script .= "</script>";

		echo $style . $list . $script;
	}

	/**
	 * Metodo che crea un tooltip su un elemento specifico
	 *
	 * @param string $element		Nome dell'elemento su cui applicare l'expose
	 * @param string $text			Testo da visualizzare nel tooltip
	 * @param boolean $isClass		Indica se l'elemento da selezionare deve essere richiamato tramite ID o CLASSE
	 * @param string $position		Posizione
	 * @param int $width			Larghezza
	 * @param int $height			Altezza
	 * @param string $background	Sfondo
	 * @param string $textColor		Colore del testo
	 * @param string $border		Bordo
	 * @param float $opacity		Opacita'
	 */

	public static function tooltip($element, $text, $isClass = false, $position = null, $width = null, $height = null, $background = null, $textColor = null, $border = null, $opacity = null)
	{
		if(is_null($position)) $position = TOOLTIP_POSITION;
		if(is_null($width)) $width = TOOLTIP_WIDTH;
		if(is_null($height)) $height = TOOLTIP_HEIGHT;
		if(is_null($background)) $background = TOOLTIP_BACKGROUND;
		if(is_null($textColor)) $textColor = TOOLTIP_TEXTCOLOR;
		if(is_null($border)) $border = TOOLTIP_BORDER;
		if(is_null($opacity)) $opacity = TOOLTIP_OPACITY;

		if(!$isClass) $isClass = "#"; else $isClass = ".";

		$nameElement = $isClass . $element;
		
		$style  = "<style>";
		$style .= "#tooltip-element-" . $element . "{";
		$style .= "display:none;";
		$style .= "background:" . $background . ";";
		$style .= "border:" . $border . ";";
		$style .= "width:" . $width . "px;";
		$style .= "height:" . $height . "px;";
		$style .= "padding:5px;";
		$style .= "font-size:10px;";
		$style .= "color:" . $textColor . "; }";
		$style .= "</style>";

		$tooltip  = "<div id=\"tooltip-element-" . $element . "\">" . $text . "</div>";

		$script  = "<script type=\"text/javascript\">";
		$script .= "$(\"" . $nameElement . "\").tooltip({";
		$script .= "tip: '#tooltip-element-" . $element . "',";
		$script .= "effect: 'slide',";
		$script .= "position: '" . $position . "',";
		$script .= "opacity: " . $opacity . ", ";
		$script .= "offset: [" . TOOLTIP_OFFSET . "] ";
		$script .= "});";
		$script .= "</script>";

		echo $style . $tooltip . $script;
	}

	/**
	 * Questo metodo applica un effetto di EXPOSE a qualsiasi elemento viene dichiarato
	 * nel parametro $element del metodo
	 *
	 * @param string $element	Nome dell'elemento su cui applicare l'expose
	 * @param boolean $isClass	Indica se l'elemento da selezionare deve essere richiamato tramite ID o CLASSE
	 */

	public static function expose($element, $isClass = false)
	{
		if(!$isClass) $isClass = "#"; else $isClass = ".";

		$nameElement = $isClass . $element;

		$script  = "<script type=\"text/javascript\">";
		$script .= "$(\"" . $nameElement . "\").click(function() {";
		$script .= "$(this).expose({api: true}).load();";
		$script .= "});";
		$script .= "</script>";

		echo $script;
	}
}
?>
